M

MLOG

Latviešu

Visaptverošs ceļvedis par tīmekļa pieejamību (a11y) 'frontend' izstrādātājiem, kas aptver principus, metodes un labāko praksi iekļaujošas tīmekļa pieredzes veidošanai.

Tīmekļa pieejamība (a11y): Praktisks ceļvedis 'Frontend' izstrādātājiem

Tīmekļa pieejamība (bieži saīsināta kā a11y, kur 11 apzīmē burtu skaitu starp 'a' un 'y') ir prakse, kā veidot un izstrādāt tīmekļa vietnes un lietojumprogrammas, kuras var lietot cilvēki ar invaliditāti. Tas ietver personas ar redzes, dzirdes, kustību, kognitīvajiem un runas traucējumiem. Pieejamu tīmekļa vietņu veidošana nav tikai atbilstības nodrošināšana; tā ir iekļaujošas un vienlīdzīgas digitālās pieredzes radīšana ikvienam, neatkarīgi no viņu spējām vai tehnoloģijām, ko viņi izmanto, lai piekļūtu tīmeklim. Tā ir arī būtiska, lai sasniegtu plašāku auditoriju. Piemēram, labs krāsu kontrasts noder lietotājiem spilgtā saules gaismā, un skaidrs izkārtojums palīdz tiem, kam ir kognitīvi traucējumi vai kuri vienkārši veic vairākus uzdevumus vienlaikus.

Kāpēc tīmekļa pieejamība ir svarīga?

Ir vairāki pārliecinoši iemesli, kāpēc tīmekļa pieejamībai piešķirt prioritāti:

Izpratne par pieejamības standartiem un vadlīnijām

Galvenais tīmekļa pieejamības standarts ir Tīmekļa satura pieejamības vadlīnijas (WCAG), ko izstrādājis Vispasaules Tīmekļa konsorcijs (W3C). WCAG nodrošina pārbaudāmu veiksmes kritēriju kopumu, ko var izmantot, lai novērtētu tīmekļa satura pieejamību. WCAG ir starptautiski atzīts un bieži tiek minēts pieejamības likumos un noteikumos visā pasaulē.

WCAG ir organizēts ap četriem principiem, ko bieži dēvē par POUR:

WCAG ir trīs atbilstības līmeņi: A, AA un AAA. A līmenis ir visvienkāršākais pieejamības līmenis, savukārt AAA līmenis ir visaptverošākais. Lielākā daļa organizāciju cenšas sasniegt AA līmeņa atbilstību, jo tas nodrošina labu līdzsvaru starp pieejamību un praktiskumu. Daudzi likumi un noteikumi prasa AA līmeņa atbilstību.

Praktiskas metodes 'Frontend' izstrādātājiem

Šeit ir dažas praktiskas metodes, ko 'frontend' izstrādātāji var izmantot, lai uzlabotu savu tīmekļa vietņu un lietojumprogrammu pieejamību:

1. Semantiskais HTML

Semantisko HTML elementu izmantošana ir izšķiroša pieejamībai. Semantiskais HTML piešķir jūsu saturam nozīmi un struktūru, padarot to vieglāk saprotamu un interpretējamu palīgtehnoloģijām. Tā vietā, lai visam izmantotu vispārīgus <div> un <span> elementus, izmantojiet HTML5 semantiskos elementus, piemēram:

Piemērs:

<header>
  <h1>My Website</h1>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>

<main>
  <article>
    <h2>Article Title</h2>
    <p>Article content here...</p>
  </article>
</main>

<footer>
  <p>© 2023 My Website</p>
</footer>

Pareizu virsrakstu līmeņu (<h1> līdz <h6>) izmantošana ir arī būtiska, lai izveidotu loģisku dokumenta struktūru. Izmantojiet virsrakstus, lai organizētu savu saturu un atvieglotu lietotājiem navigāciju. <h1> jāizmanto lapas galvenajam virsrakstam, un turpmākie virsraksti jāizmanto, lai izveidotu informācijas hierarhiju. Izvairieties no virsrakstu līmeņu izlaišanas (piemēram, pārejot no <h2> uz <h4>), jo tas var mulsināt ekrāna lasītāju lietotājus.

2. Alternatīvais teksts attēliem

Visiem attēliem jābūt ar jēgpilnu alternatīvo tekstu (alt teksts), kas apraksta attēla saturu un funkciju. Alt tekstu izmanto ekrāna lasītāji, lai nodotu attēla informāciju lietotājiem, kuri to nevar redzēt. Ja attēls ir tīri dekoratīvs un nesniedz nekādu svarīgu informāciju, alt atribūts jāiestata uz tukšu virkni (alt="").

Piemērs:

<img src="logo.png" alt="Company Logo">
<img src="decorative-pattern.png" alt="">

Rakstot alt tekstu, esiet aprakstošs un kodolīgs. Koncentrējieties uz būtiskās informācijas nodošanu, ko sniedz attēls. Izvairieties no frāzēm kā "attēls ar" vai "bilde ar", jo ekrāna lasītāji parasti paziņos, ka tas ir attēls.

Sarežģītiem attēliem, piemēram, diagrammām un grafikiem, apsveriet iespēju sniegt detalizētāku aprakstu apkārtējā tekstā vai izmantot <figure> un <figcaption> elementus.

3. Pieejamība no tastatūras

Visiem interaktīvajiem elementiem jūsu tīmekļa vietnē jābūt pieejamiem, izmantojot tastatūru. Tas ir būtiski lietotājiem, kuri nevar izmantot peli vai citu rādītājierīci. Pārliecinieties, ka lietotāji var pārvietoties pa jūsu vietni, izmantojot taustiņu Tab, un mijiedarboties ar elementiem, izmantojot taustiņus Enter vai Spacebar.

Pievērsiet uzmanību elementu fokusa secībai jūsu lapā. Fokusa secībai jāseko loģiskam un intuitīvam ceļam caur saturu. Jūs varat izmantot tabindex atribūtu, lai kontrolētu fokusa secību, bet parasti vislabāk ir paļauties uz dabisko elementu secību HTML kodā. Izmantojiet tabindex tikai, lai labotu problēmas ar noklusējuma fokusa secību.

Nodrošiniet vizuālus fokusa indikatorus, lai parādītu lietotājiem, kurš elements pašlaik ir fokusā. Pārlūkprogrammas noklusējuma fokusa indikators var nebūt pietiekams, tāpēc apsveriet iespēju pievienot savu stilu, izmantojot CSS. Pārliecinieties, ka fokusa indikatoram ir pietiekams kontrasts ar fonu.

Piemērs:

/* CSS */
a:focus, button:focus {
  outline: 2px solid blue;
  outline-offset: 2px;
}

4. ARIA atribūti

ARIA (Accessible Rich Internet Applications) ir atribūtu kopums, ko var pievienot HTML elementiem, lai sniegtu papildu semantisko informāciju palīgtehnoloģijām. ARIA atribūtus var izmantot, lai uzlabotu dinamiska satura, sarežģītu logrīku un citu interaktīvu elementu pieejamību.

Daži izplatīti ARIA atribūti ietver:

Piemērs:

<button aria-label="Close dialog" onclick="closeDialog()">X</button>
<div role="dialog" aria-labelledby="dialog-title">
  <h2 id="dialog-title">My Dialog</h2>
  <p>Dialog content here...</p>
</div>

Lietojot ARIA atribūtus, ir svarīgi ievērot ARIA lietošanas noteikumus:

5. Krāsu kontrasts

Nodrošiniet pietiekamu krāsu kontrastu starp tekstu un tā fonu. Nepietiekams krāsu kontrasts var apgrūtināt teksta lasīšanu lietotājiem ar vāju redzi vai krāsu aklumu.

WCAG prasa kontrasta attiecību vismaz 4.5:1 normālam tekstam un 3:1 lielam tekstam (18pt vai 14pt treknrakstā). Jūs varat izmantot krāsu kontrasta pārbaudītājus, lai pārliecinātos, ka jūsu tīmekļa vietne atbilst šīm prasībām. Ir pieejami daudzi bezmaksas tiešsaistes rīki, piemēram, WebAIM Contrast Checker.

Piemērs:

/* CSS */
body {
  color: #333; /* Dark gray text */
  background-color: #fff; /* White background */
}

(Šim piemēram ir kontrasta attiecība 7:1, kas atbilst WCAG prasībām.)

Izvairieties no krāsas kā vienīgā informācijas nodošanas līdzekļa izmantošanas. Lietotāji, kuri ir krāsu akli, var nespēt atšķirt dažādas krāsas. Izmantojiet papildu norādes, piemēram, teksta etiķetes vai ikonas, lai pastiprinātu krāsas nozīmi.

6. Formas un etiķetes

Pareiza formas elementu marķēšana ir izšķiroša pieejamībai. Izmantojiet <label> elementu, lai saistītu teksta etiķeti ar katru formas ievades lauku. <label> elementa for atribūtam jāsakrīt ar atbilstošā ievades elementa id atribūtu.

Piemērs:

<label for="name">Name:</label>
<input type="text" id="name" name="name">

Sarežģītām formām apsveriet iespēju izmantot <fieldset> un <legend> elementus, lai grupētu saistītos formas vadības elementus. Tas var palīdzēt lietotājiem saprast katras vadības elementu grupas mērķi.

Sniedziet skaidrus un kodolīgus kļūdu ziņojumus, kad lietotāji kļūdās, aizpildot formu. Kļūdu ziņojumiem jābūt redzamiem netālu no atbilstošā formas lauka un jānodrošina norādījumi par to, kā kļūdu labot.

Izmantojiet required atribūtu, lai norādītu, kuri formas lauki ir obligāti. Tas var palīdzēt lietotājiem izvairīties no nejaušas nepilnīgu formu iesniegšanas.

7. Multivides pieejamība

Pārliecinieties, ka multivides saturs, piemēram, video un audio ieraksti, ir pieejams lietotājiem ar invaliditāti. Nodrošiniet subtitrus video un transkripcijas audio ierakstiem. Subtitriem precīzi jāatspoguļo video runātais saturs, ieskaitot visus svarīgos skaņas efektus vai fona trokšņus.

Tiešraides video gadījumā apsveriet iespēju izmantot reāllaika subtitru pakalpojumus. Šie pakalpojumi var nodrošināt subtitrus reāllaikā, ļaujot lietotājiem ar dzirdes traucējumiem sekot līdzi saturam. Daudzas videokonferenču platformas piedāvā iebūvētas tiešraides subtitru funkcijas.

Nodrošiniet audio aprakstus videoierakstiem. Audio apraksti sniedz video vizuālā satura stāstījumu, aprakstot, kas notiek uz ekrāna. Audio apraksti ir būtiski lietotājiem, kuri ir neredzīgi vai ar vāju redzi.

Pārliecinieties, ka multivides vadības elementi, piemēram, atskaņošanas, pauzes un skaļuma regulēšanas pogas, ir pieejami no tastatūras.

8. Dinamisks saturs un atjauninājumi

Kad jūsu tīmekļa vietnes saturs tiek dinamiski atjaunināts, ir svarīgi informēt lietotājus par izmaiņām. Tas ir īpaši svarīgi lietotājiem, kuri izmanto ekrāna lasītājus, jo viņi var nezināt, ka saturs ir mainījies.

Izmantojiet ARIA tiešsaistes reģionus (live regions), lai paziņotu par dinamiskiem atjauninājumiem ekrāna lasītājiem. ARIA tiešsaistes reģioni ir lapas apgabali, kas ir paredzēti atjauninājumu saņemšanai. Kad tiešsaistes reģiona saturs mainās, ekrāna lasītājs paziņos par izmaiņām lietotājam. Izmantojiet aria-live atribūtu, lai definētu tiešsaistes reģionu. aria-atomic un aria-relevant atribūtus var izmantot, lai precīzāk noregulētu, kā ekrāna lasītājs paziņo par izmaiņām.

Piemērs:

<div aria-live="polite">
  <p id="status-message">Loading...</p>
</div>

<script>
  // Update the status message when the data is loaded
  function updateStatus(message) {
    document.getElementById("status-message").textContent = message;
  }
</script>

Šajā piemērā aria-live="polite" atribūts norāda, ka ekrāna lasītājam vajadzētu paziņot par izmaiņām <div> elementa saturā, bet nepārtraucot lietotāja pašreizējo uzdevumu. Funkcija updateStatus() atjaunina <p> elementa saturu, kas liks ekrāna lasītājam paziņot jauno statusa ziņojumu.

9. Pieejamības testēšana

Regulāri pārbaudiet savas tīmekļa vietnes pieejamību, lai identificētu un novērstu visas problēmas. Ir dažādi rīki un metodes, ko varat izmantot, lai pārbaudītu pieejamību.

Pieejamība ārpus pārlūkprogrammas

Lai gan šis ceļvedis galvenokārt koncentrējas uz tīmekļa pieejamību pārlūkprogrammas kontekstā, ir svarīgi atcerēties, ka pieejamība sniedzas tālāk par tīmekli. Apsveriet pieejamību arī citās digitālajās jomās, piemēram:

Noslēgums

Tīmekļa pieejamība ir būtisks 'frontend' izstrādes aspekts. Ievērojot šajā ceļvedī izklāstītos principus un metodes, jūs varat radīt iekļaujošu un pieejamu tīmekļa pieredzi visiem lietotājiem, neatkarīgi no viņu spējām. Atcerieties, ka pieejamība ir nepārtraukts process. Regulāri pārbaudiet savu vietni un vāciet atsauksmes no lietotājiem ar invaliditāti, lai nodrošinātu, ka tā laika gaitā paliek pieejama. Piešķirot prioritāti pieejamībai, jūs varat padarīt tīmekli par iekļaujošāku un vienlīdzīgāku vietu ikvienam.

Pieņemot pieejamību, jūs ne tikai ievērojat noteikumus; jūs veidojat labāku tīmekli ikvienam, paplašinot savu sasniedzamību un stiprinot sava zīmola reputāciju globālā mērogā.